<template>
  <view v-if="!visible" class="navbar-box">
    <!-- 占位用 -->
    <view class="navbarHeight" :style="{paddingTop: safeAreaTop + 'px'}"></view>
    <view class="navbarHeight navbar flex-y-center" :style="customStyle">
      <view class="left flex-y-center flex-x-center">
        <slot name="left">
			<u-icon v-if="pagesLength > 1" name="arrow-left"  @click="clickLeft" > </u-icon>
			<text v-else @click="clickLeft" class="iconfont icon-home font-36"></text>
        </slot>
      </view>
      <view class="content flex-w-1 u-line-1 font-center font-32">
        <slot name="center">
          <text>{{ title }}</text>
        </slot>
      </view>
      <view class="right">
        <slot name="right"> </slot>
      </view>
    </view>
  </view>
</template>
<script>
export default {
	props: {
		// 是否显示
		visible: {
			type: [Boolean],
			default: true,
		},
		// 是否粘性定位
		fixed: {
			type: [Boolean],
			default: true,
		},
		// 背景颜色
		backgroundColor: {
			type: [String],
			default: 'fff',
		},
		textColor: {
			type: [String],
			default: '#fff',
		},
		title: {
			type: [String],
			default: '',
		},
	},
	data() {
		return {
			pagesLength: 1,
		};
	},
	methods: {
		clickLeft() {
			if (this.pagesLength > 1) {
				uni.navigateBack()
			} else {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
	},
	created() {
		let pages = getCurrentPages();
		this.pagesLength = pages.length;
	},
	computed: {
		safeAreaTop () {
			const systemInfo = uni.getSystemInfoSync()
			return systemInfo.statusBarHeight + "px"
		},
		customStyle () {
			return {
				background: this.backgroundColor,
				color: this.textColor, 
				position: this.fixed ? 'fixed' : 'absolute',
				paddingTop: this.safeAreaTop + 'px',
			}
		}
	},
};
</script>

<style lang="scss" scoped>
.navbar-box {
	position: relative;
	.navbarHeight {
		height: 44px;
	}
	.navbar {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9999;
		.left {
			font-weight: 500;
			text-align: center;
			min-width: 100rpx;
		}
		.content {
			font-weight: 500;
		}
		.right {
			min-width: 100rpx;
		}
	}
}
</style>
